<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style> 
         div
         {
         width:100px;
         height:100px;
         background:red;
         position:relative;
         animation:mymove 5s infinite;
         /*animation-play-state:paused;暂停动画*/
         /*animation-name:mymove*/
         animation-timing-function:linear;/*从头到尾以相同的速度*/
         animation-delay:2s;
         animation-direction:alternate;
         animation-duration:2s;
         animation-iteration-count:3;
         /*Safari and Chrome*/
         -webkit-animation:mymove 5s infinite;
         -webkit-animation-delay:2s;/*延迟*/
         -webkit-animation-direction:alternate;/*暂停动画*/
         -webkit-animation-duration:2s;
         -webkit-animation-iteration-count:3;/*动画执行几次*/
}
         }
         
         @keyframes mymove
         {
            0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
         }
         
         @-webkit-keyframes mymove /*Safari and Chrome*/
         {
            0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
         }
         </style>
         </head>
      <body>
         <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。</p>

         <div></div>
    </body>
    </html>                                                       